<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 多次调用表达式，事件 多次调用-->
    <!-- {{ msg.split('').reverse().join('') }} 表达式 -->
    {{ msg }} - {{ msg.split('').reverse().join('') }}
    <br />
    <!-- 函数 -->
    {{ reverseMsgFn() }} - {{ reverseMsgFn() }} - {{ reverseMsgFn() }}
    <!-- 计算属性 --- 计算属性使用和data中的数据一致
      计算属性具有依赖性，只有当依赖项发生改变才会重新计算
    -->
    {{ reverseMsg }} - {{ reverseMsg }} - {{ reverseMsg }}
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
 
  new Vue({
    el: '#app',
    data: {
      msg: 'hello message',
      count: 100
    },
    computed: { // 计算属性
      reverseMsg () { // 使用函数返回值
        console.log('计算属性')
        // 当前的计算属性 reverseMsg 依赖项为 data 中 msg
        return this.msg.split('').reverse().join('') 
      }
    },
    methods: {
      reverseMsgFn () {
        console.log('事件')
        return this.msg.split('').reverse().join('') 
      }
    },
  })
</script>
</html>